<template>
   <el-card class="box-card">
      <!-- 卡片头 -->
      <template #header>
         <div class="card-header">
            <h4>欢迎登录【叫座电影】管理端</h4>
         </div>
      </template>

      <!-- 登录表单 -->
      <el-form
         ref="ruleFormRef"
         :model="ruleForm"
         status-icon
         :rules="rules"
         label-width="80px"
         class="demo-ruleForm">
         <el-form-item
            label="用户名"
            prop="username">
            <el-input v-model="ruleForm.username" />
         </el-form-item>

         <el-form-item
            label="密码"
            prop="pass">
            <el-input
               v-model="ruleForm.pass"
               type="password"
               autocomplete="off" />
         </el-form-item>

         <el-form-item
            label="确认密码"
            prop="checkPass">
            <el-input
               v-model="ruleForm.checkPass"
               type="password"
               autocomplete="off" />
         </el-form-item>

         <el-form-item>
            <el-button
               class="btn"
               type="primary"
               @click="submitForm(ruleFormRef)"
               >登录</el-button
            >
            <el-button
               class="btn"
               @click="resetForm(ruleFormRef)"
               >重置</el-button
            >
         </el-form-item>
      </el-form>
   </el-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import { login } from "@api/userApi";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();

const ruleForm = reactive({
   pass: "",
   checkPass: "",
   username: "",
});

const ruleFormRef = ref();

const regUsername = /^\w{5,20}$/;
const checkusername = (rule, value, callback) => {
   if (!regUsername.test(value)) {
      callback(new Error("用户名必须是5~20个单词字符"));
   } else {
      callback();
   }
};

const validatePass = (rule, value, callback) => {
   if (!regUsername.test(value)) {
      callback(new Error("密码必须是5~20个单词字符"));
   } else {
      callback();
   }
};

const validatePass2 = (rule, value, callback) => {
   if (value === "") {
      callback(new Error("Please input the password again"));
   } else if (value !== ruleForm.pass) {
      callback(new Error("Two inputs don't match!"));
   } else {
      callback();
   }
};

const rules = reactive({
   username: [{ validator: checkusername, trigger: "blur" }],
   pass: [{ validator: validatePass, trigger: "blur" }],
   checkPass: [{ validator: validatePass2, trigger: "blur" }],
});

/* 响应提交 */
const submitForm = formEl => {
   if (!formEl) return;

   formEl.validate(async valid => {
      if (valid) {
         console.log("submit!");

         const username = ruleForm.username;
         const password = ruleForm.pass;
         console.log(username, password);

         /* 执行登录，并将结果丢vuex */
         const { msg, user, token } = await login(username, password);
         ElMessage({
            message: msg,
            type: user ? "success" : "error",
         });

         /* 如果登录成功跳转 */
         if (user) {
            /* 将user和token丢vuex */
            store.dispatch("saveUserInfo", { user, token });

            setTimeout(() => {
               router.push("/");
            }, 500);
         }
      } else {
         console.log("error submit!");
         return false;
      }
   });
};

const resetForm = formEl => {
   if (!formEl) return;
   formEl.resetFields();
};
</script>

<style lang="scss">
.card-header {
   display: flex;
   justify-content: center;
   align-items: center;
}

.text {
   font-size: 14px;
}

.item {
   margin-bottom: 18px;
}

.box-card {
   width: 600px;
   margin: 50px auto;
   padding-right: 1rem;
}

.btn {
   width: 100px;
}
</style>
